<template>
	<view class="count_down">
		<block v-if="showType == 1">
			<block v-if="showDay">
				<view class="time_box">{{day}}</view>
				<view class="time_txt">天</view>
			</block>
			<view class="time_box">{{hour}}</view>
			<view class="time_txt">时</view>
			<view class="time_box">{{min}}</view>
			<view class="time_txt">分</view>
			<view class="time_box">{{second}}</view>
			<view class="time_txt">秒</view>
		</block>
		
		<block v-else-if="showType == 2">
			<block v-if="showDay">
				<text>{{day}}</text>
				<text class="colon">:</text>
			</block>
			<text>{{hour}}</text>
			<text class="colon">:</text>
			<text>{{min}}</text>
			<text class="colon">:</text>
			<text>{{second}}</text>
		</block>
		
		<block v-else-if="showType == 3">
			<block v-if="showDay && day!= 0">
				<text :style="[timeStyle]" class="d-center">{{day}}</text>
				<text :style="[splitorStyle]" class="colon">天</text>
			</block>
			<text :style="[timeStyle]" class="d-center">{{hour}}</text>
			<text :style="[splitorStyle]" class="colon">:</text>
			<text :style="[timeStyle]" class="d-center">{{min}}</text>
			<text :style="[splitorStyle]" class="colon">:</text>
			<text :style="[timeStyle]" class="d-center">{{second}}</text>
		</block>
		
		<block v-else-if="showType == 4">
			<block v-if="showDay">
				<view class="time_box">{{day}}</view>
				<view class="time_txt" style="font-weight: bold;">天</view>
			</block>
			<view class="time_box">{{hour}}</view>
			<view class="time_txt">:</view>
			<view class="time_box">{{min}}</view>
		</block>
	</view>
</template>

<script>
	export default {
		name: "count-down",
		data() {
			return {
				// curStartTime: '2022-12-25 08:00:00',
				day: '0',
				hour: '00',
				min: '00',
				second: '00',
				timer: null,
				selectColumns:''
			};
		},
		props: { //接收父组件的数据
			starTime: {
				type: String,
				default: ''
			},
			showDay: {
				type: Boolean,
				default: true
			},
			showType: {
				type: Number,
				default: 1
			},
			backgroundColor: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: '#333'
			},
			fontSize: {
				type: Number,
				default: 14
			},
			splitorColor: {
				type: String,
				default: '#333'
			},
		},
		mounted() {
			this.countTime()
			// console.log('this.starTime',this.starTime)
		},
		// watch: {
		//     // watch监听到父组件传递过来的数据后，存到data中去，然后在页面上使用
		//     starTime(newnew, oldold) {
		//       this.selectColumns =  newnew
		// 	  console.log('this.selectColumns',newnew)
		// 	  this.countTime()
		//     },
		//     deep:true,
		// 	immediate:true
		// },
		computed: {
			timeStyle() {
				const {
					color,
					backgroundColor,
					fontSize
				} = this
				return {
					color,
					backgroundColor,
					fontSize: `${fontSize}px`,
					minWidth: `${fontSize * 22 / 14}px`, // 按字体大小为 28rpx 时的比例缩放
					lineHeight: `${fontSize * 20 / 14}px`,
					borderRadius: `${fontSize * 3 / 14}px`,
				}
			},
			splitorStyle() {
				const { splitorColor, fontSize, backgroundColor } = this
				return {
					color: splitorColor,
					fontSize: `${fontSize * 12 / 14}px`,
					margin: backgroundColor ? `${fontSize * 4 / 14}px` : ''
				}
			}
		},
		methods: {
			countTime() {
				// 获取当前时间
				let date = new Date()
				let now = date.getTime()
				// 设置截止时间
				let endDate = new Date(this.starTime.replace(/-/g,'/')) // this.selectColumns需要倒计时的日期
				let end = endDate.getTime()
				// 时间差
				let leftTime = end - now
				// 定义变量 d,h,m,s保存倒计时的时间
				if (leftTime >= 0) {
					// 天
					this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24)
					// 时
					let h = Math.floor(leftTime / 1000 / 60 / 60 % 24)
					this.hour = h < 10 ? '0' + h : h
					// 分
					let m = Math.floor(leftTime / 1000 / 60 % 60)
					this.min = m < 10 ? '0' + m : m
					// 秒
					let s = Math.floor(leftTime / 1000 % 60)
					this.second = s < 10 ? '0' + s : s
				} else {
					this.day = 0
					this.hour = '00'
					this.min = '00'
					this.second = '00'
				}
				// 等于0的时候不调用
				if (Number(this.hour) === 0 && Number(this.day) === 0 && Number(this.min) === 0 && Number(this.second) ===
					0) {
					clearInterval(this.timer)
					this.$emit('endSuccess')
					return
				} else {
					// 递归每秒调用countTime方法，显示动态时间效果,
					this.timer = setTimeout(this.countTime, 1000)
				}
			},
		},
	}
</script>

<style>
	.count_down {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.time_box {
		width: 38rpx;
		height: 38rpx;
		border-radius: 6rpx;
		background: #A67517;
		color: #FFFFFF;
		font-size: 24rpx;
		text-align: center;
		line-height: 38rpx;
		margin-right: 10rpx;
	}

	.time_txt {
		font-size: 24rpx;
		color: #A67517;
		margin-right: 10rpx;
	}
	.colon{
		margin-left: 4rpx;
		margin-right: 4rpx;
	}
	.d-center{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 2rpx;
	}
</style>
